<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="imagetoolbar" content="no" />
	<title>Class UI.TabPane</title>
	<link href="../resources/API_Help.css" type="text/css" rel="stylesheet" />
</head>

<body>
<!--打印本页-->
<div class="printCurrentPage">
	<img src="../resources/image/print.gif" align="absmiddle" />&nbsp;
	<a href="ui_TabPane_API.html" target="_blank">打印本页</a>
</div><br/>

<!--标题说明-->
<h1>Class UI.TabPane</h1>
<b>定义于文件：</b>&nbsp;&nbsp;ui_TabPane.js
<div class="description">将页面对象渲染成选项卡控件。</div><br/>
<b>基本语法</b>
<div class="syntax">var tabPanel = new <b>UI.TabPane</b>( { &lt; <em>id:String|Tag</em> &gt; [ , <em>width:Number</em>,&nbsp;&nbsp;<em>height:Number</em>,&nbsp;&nbsp;<em>mode:TOP|BTM</em>,&nbsp;&nbsp;<em>iframe:boolean</em>,&nbsp;&nbsp;<em>border:boolean</em>,&nbsp;&nbsp;<em>tabs:Array</em> ] } );</div>
<b>参数说明</b>
<div class="parameter">
	<ul>
		<li><em>id</em> : String|Tag</li>
		<div class="subDesc">页面选项卡标签ID或是页面选项卡标签对象。</div>
		<li><em>width</em> : Number</li>
		<div class="subDesc">(可选参数) 选项卡的宽度, 默认值：200px。</div>
		<li><em>height</em> : Number</li>
		<div class="subDesc">(可选参数) 选项卡的高度, 默认值：120px。</div>
		<li><em>mode</em> : TOP|BTM</li>
		<div class="subDesc">(可选参数) 选项卡标签项的模式, TOP: 在控件顶端, BTM: 在控件底端, 默认值：TOP。</div>
		<li><em>iframe</em> : boolean</li>
		<div class="subDesc">(可选参数) 选项卡是否添加内置iframe, 默认值：false。</div>
		<li><em>border</em> : boolean</li>
		<div class="subDesc">(可选参数) 选项卡是否有边框, 默认值：true。</div>
		<li><em>tabs</em> : Array</li>
		<div class="subDesc">(可选参数) 选项卡的所有Tab标签项的初始化参数集合, 数组元素为初始化Tab标签项的参数。(具体说明参见 <a href="#addTab">addTab</a> 方法)</div>
		<div class="subDesc">&nbsp;&nbsp;&nbsp;&nbsp;初始化Tab标签项的参数语法: { <em>caption:String</em>,&nbsp;&nbsp;<em>icon:String</em>,&nbsp;&nbsp;<em>width:Number</em>,&nbsp;&nbsp;<em>closed:boolean</em>,&nbsp;&nbsp;<em>panel:String|Tag</em>,&nbsp;&nbsp;<em>url:String</em>,&nbsp;&nbsp;<em>resize:Function</em> }</div>
		<div class="subDesc">&nbsp;&nbsp;&nbsp;&nbsp;tabs = [ 组面板参数1, 组面板参数2, 组面板参数3, ...];</div>
	</ul>
</div>
<b>页面标签对象原型</b>
<div class="parameter">
	&lt;div&gt;&lt;/div&gt;
</div>
<b>依赖关系</b>
<div class="parameter">
	<a href="core_API.html">core.js</a>　　<a href="#">webui.js</a>
</div><br/>
<a href="#properties">相关属性</a>&nbsp;&nbsp;-&nbsp;&nbsp;
<a href="#methods">相关方法</a>&nbsp;&nbsp;-&nbsp;&nbsp;
<a href="#events">相关事件</a>&nbsp;&nbsp;-&nbsp;&nbsp;
<a href="#examples">应用示例</a>
<hr>

<!--相关属性-->
<a name="properties"></a>
<h2>相关属性</h2>
<table width="100%" cellspacing="0">
	<tbody>
		<tr>
			<td class="tableHead" width="83%">所有属性</td>
			<td class="tableHead" width="17%">所属类</td>
		</tr>
		<tr>
			<td class="tableLineLeft">
				<a href="#UI.TabPane.dom" class="methodLink">UI.TabPane.dom</a>&nbsp;:&nbsp;&lt;div&gt;<br/>
				选项卡控件的页面标签对象。
			</td><td class="tableLineRight">UI.TabPane</td>
		</tr>
	</tbody>
</table>

<!--相关方法-->
<a name="methods"></a>
<h2>相关方法</h2>
<table width="100%" cellspacing="0">
	<tbody>
		<tr>
			<td class="tableHead" width="83%">所有方法</td>
			<td class="tableHead" width="17%">所属类</td>
		</tr>
		<tr>
			<td class="tableLineLeft">
				<a href="#addTab" class="methodLink">addTab</a>( <em>tab:Object</em> )&nbsp;:&nbsp;none<br/>
				向选项卡中添加一个Tab标签项。
			</td><td class="tableLineRight">UI.TabPane</td>
		</tr>
		<tr>
			<td class="tableLineLeft alt">
				<a href="#disable" class="methodLink">disable</a>( <em>index:Number</em>,&nbsp;&nbsp;<em>disabled:boolean</em> )&nbsp;:&nbsp;none<br/>
				设置选项卡控件中index所对应的Tab标签项是否可用。
			</td><td class="tableLineRight alt">UI.TabPane</td>
		</tr>
		<tr>
			<td class="tableLineLeft">
				<a href="#getSelectedTab" class="methodLink">getSelectedTab</a>()&nbsp;:&nbsp;Object<br/>
				返回选项卡控件当前选中Tab标签项的属性。
			</td><td class="tableLineRight">UI.TabPane</td>
		</tr>
		<tr>
			<td class="tableLineLeft alt">
				<a href="#onChange" class="methodLink">onChange</a>( <em>callBack:Function</em> )&nbsp;:&nbsp;none<br/>
				设置选项卡控件的动作事件回调。
			</td><td class="tableLineRight alt">UI.TabPane</td>
		</tr>
		<tr>
			<td class="tableLineLeft">
				<a href="#removeAll" class="methodLink">removeAll</a>()&nbsp;:&nbsp;none<br/>
				清空选项卡控件所有的Tab标签项。
			</td><td class="tableLineRight">UI.TabPane</td>
		</tr>
		<tr>
			<td class="tableLineLeft alt">
				<a href="#removeTab" class="methodLink">removeTab</a>( <em>index:Number</em> )&nbsp;:&nbsp;none<br/>
				删除选项卡控件中index所对应的Tab标签项。
			</td><td class="tableLineRight alt">UI.TabPane</td>
		</tr>
		<tr>
			<td class="tableLineLeft">
				<a href="#select" class="methodLink">select</a>( <em>index:Number</em> )&nbsp;:&nbsp;none<br/>
				设置index所对应的Tab标签项为当前Tab标签项。
			</td><td class="tableLineRight">UI.TabPane</td>
		</tr>
		<tr>
			<td class="tableLineLeft alt">
				<a href="#setMode" class="methodLink">setMode</a>( <em>mode:TOP|BTM</em> )&nbsp;:&nbsp;none<br/>
				设置选项卡控件Tab标签栏的模式。
			</td><td class="tableLineRight alt">UI.TabPane</td>
		</tr>
		<tr>
			<td class="tableLineLeft">
				<a href="#setSize" class="methodLink">setSize</a>( <em>width:Number</em>,&nbsp;&nbsp;<em>height:Number</em> )&nbsp;:&nbsp;none<br/>
				设置选项卡的大小。
			</td><td class="tableLineRight">UI.TabPane</td>
		</tr>
	</tbody>
</table>

<!--相关事件-->
<a name="events"></a>
<h2>相关事件</h2>
<table width="100%" cellspacing="0">
	<tbody>
		<tr>
			<td class="tableHead" width="83%">所有事件</td>
			<td class="tableHead" width="17%">所属类</td>
		</tr>
		<tr>
			<td class="tableLineLeft">
				<a href="#UI.TabPane.onChangeEvent" class="methodLink">UI.TabPane.onChangeEvent</a>&nbsp;:&nbsp;Function<br/>
				选项卡控件切换Tab标签项时的动作事件。
			</td><td class="tableLineRight">UI.TabPane</td>
		</tr>
	</tbody>
</table>
<br/>

<hr>

<!--相关属性的详细说明-->
<h2>本类属性的详细说明</h2>
<div class="detailWrap">

<a name="UI.TabPane.dom"></a>
<div class="mdetail">
	<h3>UI.TabPane.dom</h3><br/>
	<div class="mdetailDetails">
		选项卡控件的页面标签对象。<br/>
		通过 dom 属性可直接对选项卡进行操作。
	</div>
	<div class="footer since">@since JSR2.0&nbsp;&nbsp;&nbsp;&nbsp;<a href="ui_TabPane_API.html">Return</a></div><br/>
</div>

</div><br/>

<!--相关方法的详细说明-->
<h2>本类方法的详细说明</h2>
<div class="detailWrap">

<a name="addTab"></a>
<div class="mdetail">
	<h3>addTab</h3>
	<div class="functionDefine">public function addTab( tab:Object )</div>
	<div class="mdetailDetails">
		向选项卡中添加一个Tab标签项, 标签项面板内里JSR2+控件必须先于本控件渲染。
	</div><br/>
	<div class="mdetailDetails"><b>参数</b>
		<ul>
			<li><em>tab</em> : Object</li>
			<div class="subDesc">参数 tab 为新添加Tab标签项的参数。&nbsp;&nbsp;&nbsp;&nbsp;注意: panel 与 url 不能同时使用!</div>
			<div class="subDesc">&nbsp;&nbsp;&nbsp;&nbsp;新添加Tab标签项的参数语法：{ <em>caption:String</em>,&nbsp;&nbsp;<em>icon:String</em>,&nbsp;&nbsp;<em>width:Number</em>,&nbsp;&nbsp;<em>closed:boolean</em>,&nbsp;&nbsp;<em>panel:String|Tag</em>,&nbsp;&nbsp;<em>url:String</em>,&nbsp;&nbsp;<em>resize:Function</em> }</div>
			<div class="subDesc">&nbsp;&nbsp;&nbsp;&nbsp;<em>caption</em> : String&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;标签项的文本标题, 默认值: Tab标签项。</div>
			<div class="subDesc">&nbsp;&nbsp;&nbsp;&nbsp;<em>icon</em> : String&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;标签项图标的URL地址, 值为false时无图标, 默认值: 系统图标。</div>
			<div class="subDesc">&nbsp;&nbsp;&nbsp;&nbsp;<em>width</em> : Number&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;标签项的宽度, 默认值: 125px。</div>
			<div class="subDesc">&nbsp;&nbsp;&nbsp;&nbsp;<em>closed</em> : boolean&nbsp;&nbsp;&nbsp;&nbsp;标签项是否有关闭按钮, 默认值: false。</div>
			<div class="subDesc">&nbsp;&nbsp;&nbsp;&nbsp;<em>panel</em> : String|Tag&nbsp;&nbsp;标签项的面板标签ID或标签对象。</div>
			<div class="subDesc">&nbsp;&nbsp;&nbsp;&nbsp;<em>url</em> : String&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;标签项所对应的url链接地址。</div>
			<div class="subDesc">&nbsp;&nbsp;&nbsp;&nbsp;<em>resize</em> : Function&nbsp;&nbsp;&nbsp;&nbsp;标签项布局调整方法。</div>
		</ul>
		<b>返回值</b>
		<ul><li>无</li></ul>
	</div>
	<div class="footer since">@since JSR2.0&nbsp;&nbsp;&nbsp;&nbsp;<a href="ui_TabPane_API.html">Return</a></div><br/>
</div>

<a name="disable"></a>
<div class="mdetail alt">
		<h3>disable</h3>
	<div class="functionDefine">public function disable( index:Number, disable:boolean )</div>
	<div class="mdetailDetails">设置选项卡控件中index所对应的Tab标签项是否可用。</div><br/>
	<div class="mdetailDetails"><b>参数</b>
		<ul>
			<li><em>index</em> : Number</li>
			<div class="subDesc">Tab标签项的索引号。</div>
			<li><em>disable</em> : boolean</li>
			<div class="subDesc">参数的取值&nbsp;&nbsp;&nbsp;&nbsp;true: 不可用, false: 可用。</div>
		</ul>
		<b>返回值</b>
		<ul><li>无</li></ul>
	</div>
	<div class="footer since">@since JSR2.0&nbsp;&nbsp;&nbsp;&nbsp;<a href="ui_TabPane_API.html">Return</a></div><br/>
</div>

<a name="getSelectedTab"></a>
<div class="mdetail">
	<h3>getSelectedTab</h3>
	<div class="functionDefine">public function getSelectedTab()</div>
	<div class="mdetailDetails">
		返回选项卡控件当前选中Tab标签项的属性。
	</div><br/>
	<div class="mdetailDetails"><b>参数</b>
		<ul><li>无</li></ul>
		<b>返回值</b>
		<ul>
			<li>Object</li>
			<div class="subDesc">{ <em>caption:String</em>,&nbsp;&nbsp;<em>index:Number</em> }</div>
		</ul>
	</div>
	<div class="footer since">@since JSR2.0&nbsp;&nbsp;&nbsp;&nbsp;<a href="ui_TabPane_API.html">Return</a></div><br/>
</div>

<a name="onChange"></a>
<div class="mdetail alt">
	<h3>onChange</h3>
	<div class="functionDefine">public function onChange( callBack:Function )</div>
	<div class="mdetailDetails">
		设置选项卡控件的动作事件回调。<br/>
		当事件触发时, 系统会自动将当前Tab标签项的标题文本作为参数调用 callBack 方法。
	</div><br/>
	<div class="mdetailDetails"><b>参数</b>
		<ul>
			<li><em>callBack</em> : Function</li>
			<div class="subDesc">回调函数名。</div>
		</ul>
		<b>返回值</b>
		<ul><li>无</li></ul>
	</div>
	<div class="footer since">@since JSR2.0&nbsp;&nbsp;&nbsp;&nbsp;<a href="ui_TabPane_API.html">Return</a></div><br/>
</div>

<a name="removeAll"></a>
<div class="mdetail">
		<h3>removeAll</h3>
	<div class="functionDefine">public function removeAll()</div>
	<div class="mdetailDetails">清空选项卡控件所有的Tab标签项。</div><br/>
	<div class="mdetailDetails"><b>参数</b>
		<ul><li>无</li></ul>
		<b>返回值</b>
		<ul><li>无</li></ul>
	</div>
	<div class="footer since">@since JSR2.0&nbsp;&nbsp;&nbsp;&nbsp;<a href="ui_TabPane_API.html">Return</a></div><br/>
</div>

<a name="removeTab"></a>
<div class="mdetail alt">
		<h3>removeTab</h3>
	<div class="functionDefine">public function removeTab( index:Number )</div>
	<div class="mdetailDetails">删除选项卡控件中index所对应的Tab标签项。</div><br/>
	<div class="mdetailDetails"><b>参数</b>
		<ul>
			<li><em>index</em> : Number</li>
			<div class="subDesc">Tab标签项的索引号。</div>
		</ul>
		<b>返回值</b>
		<ul><li>无</li></ul>
	</div>
	<div class="footer since">@since JSR2.0&nbsp;&nbsp;&nbsp;&nbsp;<a href="ui_TabPane_API.html">Return</a></div><br/>
</div>

<a name="select"></a>
<div class="mdetail">
	<h3>select</h3>
	<div class="functionDefine">public function select( index:Number )</div>
	<div class="mdetailDetails">
		设置index所对应的Tab标签项为当前Tab标签项。
	</div><br/>
	<div class="mdetailDetails"><b>参数</b>
		<ul>
			<li><em>index</em> : Number</li>
			<div class="subDesc">Tab标签项的索引号。</div>
		</ul>
		<b>返回值</b>
		<ul><li>无</li></ul>
	</div>
	<div class="footer since">@since JSR2.0&nbsp;&nbsp;&nbsp;&nbsp;<a href="ui_TabPane_API.html">Return</a></div><br/>
</div>

<a name="setMode"></a>
<div class="mdetail alt">
		<h3>setMode</h3>
	<div class="functionDefine">public function setMode( mode:TOP|BTM  )</div>
	<div class="mdetailDetails">设置选项卡控件Tab标签栏的模式。</div><br/>
	<div class="mdetailDetails"><b>参数</b>
		<ul>
			<li><em>mode</em> : TOP|BTM (String)</li>
			<div class="subDesc">参数的取值&nbsp;&nbsp;&nbsp;&nbsp;TOP: 控件上方, BTM: 控件下方。</div>
		</ul>
		<b>返回值</b>
		<ul><li>无</li></ul>
	</div>
	<div class="footer since">@since JSR2.0&nbsp;&nbsp;&nbsp;&nbsp;<a href="ui_TabPane_API.html">Return</a></div><br/>
</div>

<a name="setSize"></a>
<div class="mdetail">
	<h3>setSize</h3>
	<div class="functionDefine">public function setSize( width:Number, height:Number )</div>
	<div class="mdetailDetails">设置选项卡的大小。</div><br/>
	<div class="mdetailDetails"><b>参数</b>
		<ul>
			<li><em>width</em> : Number</li>
			<div class="subDesc">选项卡的宽度, 默认值: 180px。</div>
			<li><em>height</em> : Number</li>
			<div class="subDesc">选项卡的高度, 默认值: 220px。</div>
		</ul>
		<b>返回值</b>
		<ul><li>无</li></ul>
	</div>
	<div class="footer since">@since JSR2.0&nbsp;&nbsp;&nbsp;&nbsp;<a href="ui_TabPane_API.html">Return</a></div><br/>
</div>

</div><br/>

<!--相关事件的详细说明-->
<h2>本类事件的详细说明</h2>
<div class="detailWrap">

<a name="UI.TabPane.onChangeEvent"></a>
<div class="mdetail">
	<h3>UI.TabPane.onChangeEvent</h3><br/>
	<div class="mdetailDetails">
		选项卡控件的Tab标签项切换动作事件。<br/>
		在切换控件中Tab标签项的时候, 将会触发此事件, 具体的应用请参见方法 <a href="#onChange" class="methodLink">onChange</a> 的说明。
	</div>
	<div class="footer since">@since JSR2.0&nbsp;&nbsp;&nbsp;&nbsp;<a href="ui_TabPane_API.html">Return</a></div><br/>
</div>

</div><br/>

<!--应用示例-->
<a name="examples"></a>
<h2>应用示例</h2>
<div class="properties"><a href="../Example/ui_TabPane.html" target="_blank">ui_TabPane.html</a></div><br/>

<!--页脚-->
<hr>
<div class="footer">JSR - Copyright &copy; 2007-2008 Jsr JS, LLC<br/>All rights reserved.</div>
</body>
</html>
